<template>
    <div class="home">
		<van-field v-model="value" label="文本" placeholder="请输入用户名" />
		<van-button type="primary" @click="search()">搜索</van-button>
		<van-list
			v-model="loading"
			:finished="finished"
			finished-text="没有更多了"
			@load="onLoad"
		>
			<van-card
				v-for="item in shopList"
				:key="item.id"
				:num="item.stock"
				:price="item.price"
				:desc="item.content"
				:title="item.title"
				:thumb="item.image"
				@click="$router.push(`/detail/${item.id}`)"
				/>
		</van-list>
		
	</div>
</template>

<script>
import {mapState,mapActions, mapMutations} from 'vuex'
export default {
    data() {
        return {
			loading: false,
			finished: false,
            pageIndex: 1,
            pageSize: 10,
			value:""
        }
    },
	computed: {
		...mapState('shop',['shopList','total'])
	},
    created() {
		// 因为vuex的长效存储 为了防止key重复 所以每次默认先清空一次
		this.clearShopList()
		console.log(this.$store.state.user.userData)
	},
    methods: {
		...mapMutations('shop', ['clearShopList']),
		...mapActions('shop',['SET_SHOP_LIST']),
		async onLoad() {
			await this.pageChange(this.pageIndex)
			this.loading = false;
			if (this.shopList.length >= this.total) {
				this.finished = true;
			}
		},
		search() {
			// 模糊搜索之前先清空数组
			this.clearShopList()
			this.pageChange(1)
		},
		pageChange(index) {
			this.pageIndex= index;
			return this.SET_SHOP_LIST({
				pageIndex:this.pageIndex++,
				pageSize: this.pageSize,
				keyword: this.value
			})
		}
    },
}
</script>

<style>
</style>